<ion-header>
  <ion-toolbar>
    <ion-button (click)="back()" fill="clear" slot="start">
      <ion-icon slot="start" name="chevron-back-outline"></ion-icon>
    </ion-button>
    {{title}}
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngIf="res" style="margin:0;padding:0;">
    <ion-card-header *ngFor="let item of res.results">
      <ion-item color="primary">
        <ion-thumbnail
          slot="start"
          style="height: 10rem;width: 6rem;padding-top: 0.5rem;"
        >
          <img class="book_img" [src]="item.cover" alt="" />
        </ion-thumbnail>
        <ion-label style="padding-left: 0.6rem;">
          <div class="book_title">
            <h2>{{item.title}}</h2>
            <span>{{item.author}}</span>

            <span class="book_minor">{{item.minorCate}}</span>
            <div class="book_cate">
              <span>{{item.majorCate}}</span>/
              <span>{{item.numCount}}字</span>
            </div>
          </div>
          <div style="margin-top: 0.8rem;">
            <span class="count">总推荐 </span>
            <span class="book_num"> {{item.recommended}}</span>
            <span class="count" style="padding-left: 1rem;">总点击 </span>
            <span class="book_num"> {{item.click}}</span>
          </div>
        </ion-label>
      </ion-item>
      <ion-card-content class="border">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;{{item.shortIntro}}</span>
      </ion-card-content>
    </ion-card-header>
    <ion-item-group *ngIf="cate">
      <ion-item-divider>
        <ion-label style="letter-spacing: 0.1rem;padding-left: 0.5rem;"
          >小说章节</ion-label
        >
      </ion-item-divider>
      <ion-item
        *ngFor="let item of cate.results"
        [routerLink]="['/cate',{num_id: item.num_id,title:item.title}]"
      >
        <ion-label>{{item.section}}</ion-label>
      </ion-item>
    </ion-item-group>
  </ion-card>
  <h6 align="center" style="color: gray;margin: 0.5rem 0;">没有了呦</h6>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-grid fixed>
      <ion-row style="text-align: center;">
        <ion-col size="6">
          <ng-container *ngIf="isExist=='true'; else elseTemplate">
            <ion-button fill="clear" style="width: 10rem;" disabled>
              <ion-icon name="library-outline"></ion-icon>&nbsp;&nbsp;
              <span> 已加入书架</span>
            </ion-button>
          </ng-container>
          <ng-template #elseTemplate>
            <ion-button (click)="addBook()" fill="clear" style="width: 10rem;">
              <ion-icon name="library-outline"></ion-icon>&nbsp;&nbsp;
              <span> 加入书架</span>
            </ion-button>
          </ng-template>
        </ion-col>
        <ion-col size="6">
          <ion-button
            [routerLink]="['/cate',{num_id:1,title:title}]"
            (click)="addHistory()"
            shape="round"
            style="width: 10rem;"
          >
            <ion-icon name="book-outline"></ion-icon>
            <span>立即阅读</span>&nbsp;&nbsp;
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>
